<template>
  <div>
    //下面的div给表一个容器
    <div id="myChart" :style="{width: '100%', height: '600px'}"></div>
  </div>
</template>
<script>
import axios from "axios";
import { emlPath } from "./config/config";
import "./javascript/DateUtil.js";
export default {
  name: "DataCount",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      emlPath: encodeURIComponent(emlPath[0]),
      Statistics: [], //存分组，计数
      tags: [], //存tags
      //与pie不同的是这里需要一组固定的X轴
      xAxis: [
        "一月/January",
        "二月/February",
        "三月/March",
        "四月/April",
        "五月/May",
        "六月/June",
        "七月/July",
        "八月/August",
        "九月/September",
        "十月October",
        "十一月/November",
        "十二月/December"
      ]
    };
  },
  mounted() {
    console.log("this.tags, this.Statistics", this.tags, this.Statistics);
    this.initStatistic();
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    initCharts(tags, Statistics) {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        title: {
          text: "服务器邮件的原始时期分布",
          subtext: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          //最上面的年份分类
          //data: ["2018年数据", "2019年数据", "2020年数据"]
          data: tags
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none"
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          //data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
          data: this.xAxis
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: Statistics
        /* [
          {
            name: "2018年数据",
            type: "line",
            data: [11, 11, 15, 13, 12, 13, 10,4,6,8,9,33],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "2019年数据",
            type: "line",
            data: [1, 6, 2, 5, 3, 2, 0,8,34,22,11,10],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          },
          {
            name: "2020年数据",
            type: "line",
            data: [22, 22, 30, 26, 24, 26, 20],
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }]
            }
          }
        ] */
      });
    },
    async initStatistic() {
      axios
        .get("/api/EmlServerController/serverEmls/allemls?userName=" + this.userSO_json.userName,{
          headers: {
            //头部信息
            "Content-Type": "application/json;charset=utf-8",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          var list = response.data.data;
          for (var i = 0; i < list.length; i++) {
            var senderDate = list[i].senderDate;
            console.log("senderDate", senderDate);
            var type = "line";
            var markPoint = {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" }
              ]
            };
            var markLine = {
              data: [{ type: "average", name: "平均值" }]
            };
            var name = "";
            //先分组
            if (senderDate.split("2018").length != 1) {
              name = "2018年数据";
            } else if (senderDate.split("2019").length != 1) {
              name = "2019年数据";
            } else if (senderDate.split("2020").length != 1) {
              name = "2020年数据";
            }

            //不管是任何一组，DateUtil.js统一管理
            //初始化
            var flag = 0;
             var existFlag = false;
            if (this.Statistics.length == 0) {
                flag=1;
                existFlag=true;
              this.tags.push(name);
              let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; //let块级作用域要比var函数级小
              data = JSON.parse(JSON.stringify(this.DateUtil.monthUtil(senderDate, data))),
                this.Statistics.push({
                  name: name,
                  data: data,
                  type: type,
                  markPoint: markPoint,
                  markLine: markLine
                });
            }
            //存在加一
            if (this.Statistics.length >= 1&&flag==0) {
              for (let i = 0; i < this.Statistics.length; i++) {
                var item = this.Statistics[i];
                if (item.name == name) {
                  existFlag = true;
                  item.data = JSON.parse(JSON.stringify(this.DateUtil.monthUtil(senderDate, item.data)));
                }
              }
            }
            //不存在追加
            if (existFlag == false) {
              this.tags.push(name);
              let data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; //let块级作用域要比var函数级作用域小
              data = JSON.parse(JSON.stringify(this.DateUtil.monthUtil(senderDate, data))),
                this.Statistics.push({
                  name: name,
                  data: data,
                  type: type,
                  markPoint: markPoint,
                  markLine: markLine
                });
            }
          }
          //   console.log("this.tags, this.Statistics",this.tags, this.Statistics)
          this.initCharts(this.tags, this.Statistics);
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
    }
  }
};
</script>
